import './Logs.css'
import Card from '../UI/Card/Card'
import LogItem from './LogItem/LogItem'

const logs = (props) => {
    
    let logsItemData = props.logsData.map((item, index) => 
        <LogItem 
            //闭包保留索引
            deleteLogByIndex={() => props.deleteLogByIndex(index)}
            {...item}
        />
    )

    //无日志提示
    if (logsItemData.length === 0){
        logsItemData = <p>无日志</p>;
    } 
    
    return <Card className="logs" >
        
        {
            logsItemData
        }
    </Card>
}

export default logs;
